<template>
  <div class="order-express">
    <!-- 展示物流进度的对话框 -->
    <el-dialog title="物流进度" v-model="dialogVisible" width="50%">
      <!-- 时间线 -->
      <el-timeline>
        <el-timeline-item v-for="(item, index) in progressInfo" :key="index" :timestamp="item.time" :color="item.color">
          {{ item.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
// 导入物流数据(模拟数据)
import express from './express'
import { ref } from 'vue'
export default {
  name: 'OrderExpress',
  setup() {
    const dialogVisible = ref(false)
    const open = (order) => {
     // console.log(order)
      dialogVisible.value = true
    }
    // 物流数据
    const progressInfo = express.data
    // 给最后一条物流信息加一个标识颜色
    progressInfo[0].color = '#0bbd87'
    return { dialogVisible, open, progressInfo }
  }

}
</script>

<style lang="less" scoped>
.el-timeline-item .el-timeline-item__node{
   background-color: red !important;
}
</style>